<template>
	<view class="container">
		<!-- 空状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 头部区域 -->
		<view class="header">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar || '/static/个人头像.png'" @click="goToProfile"></image>
				<view class="user-details">
					<text class="title">更多功能</text>
					<view class="role-info" v-if="roleConfig">
						<text class="role-icon">{{ roleConfig.icon }}</text>
						<text class="role-name">{{ roleConfig.name }}</text>
					</view>
				</view>
			</view>
			<view class="settings-icon" @click="goToSettings">
				<text class="icon">⚙️</text>
			</view>
		</view>
		
		<!-- 横幅区域 -->
		<view class="banner">
			<view class="banner-bg">
				<text class="banner-text">智慧维保</text>
				<text class="banner-subtitle">让报修更简单</text>
			</view>
		</view>
		
		<!-- 主要功能区域 -->
		<view class="main-functions">
			<!-- 系统管理功能（仅管理员可见） -->
			<PermissionCheck :roles="['admin']">
				<view class="function-section">
					<view class="section-title">系统管理</view>
					<view class="function-grid">
						<view class="function-item" @click="goToUserManagement">
							<view class="function-icon admin">👥</view>
							<text class="function-text">用户管理</text>
						</view>
						<view class="function-item" @click="goToRoleManagement">
							<view class="function-icon admin">🔐</view>
							<text class="function-text">角色管理</text>
						</view>
						<view class="function-item" @click="goToSystemSettings">
							<view class="function-icon admin">⚙️</view>
							<text class="function-text">系统设置</text>
						</view>
					</view>
				</view>
			</PermissionCheck>
			
			<!-- 维修管理功能（维修主管和管理员可见） -->
			<PermissionCheck :roles="['admin', 'maintenance_manager']">
				<view class="function-section">
					<view class="section-title">维修管理</view>
					<view class="function-grid">
						<view class="function-item" @click="goToRepairManagement">
							<view class="function-icon manager">🔧</view>
							<text class="function-text">维修管理</text>
						</view>
						<view class="function-item" @click="goToWorkOrderManagement">
							<view class="function-icon manager">📋</view>
							<text class="function-text">工单管理</text>
						</view>
						<view class="function-item" @click="goToReports">
							<view class="function-icon manager">📊</view>
							<text class="function-text">统计报表</text>
						</view>
					</view>
				</view>
			</PermissionCheck>
			
			<!-- 仓库管理功能（仓库管理员和管理员可见） -->
			<PermissionCheck :roles="['admin', 'warehouse_manager']">
				<view class="function-section">
					<view class="section-title">仓库管理</view>
					<view class="function-grid">
						<view class="function-item" @click="goToInventoryManagement">
							<view class="function-icon warehouse">📦</view>
							<text class="function-text">库存管理</text>
						</view>
						<view class="function-item" @click="goToWarehouseSettings">
							<view class="function-icon warehouse">🏪</view>
							<text class="function-text">仓库设置</text>
						</view>
					</view>
				</view>
			</PermissionCheck>
			
			<!-- 个人功能（所有用户可见） -->
			<view class="function-section">
				<view class="section-title">个人功能</view>
				<view class="function-grid">
					<view class="function-item" @click="goToProfile">
						<view class="function-icon personal">👤</view>
						<text class="function-text">个人资料</text>
					</view>
					<view class="function-item" @click="goToChangePassword">
						<view class="function-icon personal">🔑</view>
						<text class="function-text">修改密码</text>
					</view>
					<view class="function-item" @click="goToMyTasks">
						<view class="function-icon personal">📝</view>
						<text class="function-text">我的任务</text>
					</view>
				</view>
			</view>
			
			<!-- 开发测试功能（仅管理员可见） -->
			<PermissionCheck :roles="['admin']">
				<view class="function-section">
					<view class="section-title">开发测试</view>
					<view class="function-grid">
						<view class="function-item" @click="goToSimpleTest">
							<view class="function-icon test">🧪</view>
							<text class="function-text">简单测试</text>
						</view>
						<view class="function-item" @click="goToCompleteTest">
							<view class="function-icon test">📊</view>
							<text class="function-text">完整测试</text>
						</view>
						<view class="function-item" @click="goToPermissionTest">
							<view class="function-icon test">🔐</view>
							<text class="function-text">权限测试</text>
						</view>
						<view class="function-item" @click="toggleDebug">
							<view class="function-icon test">🔍</view>
							<text class="function-text">调试信息</text>
						</view>
						<view class="function-item" @click="refreshData">
							<view class="function-icon test">🔄</view>
							<text class="function-text">刷新数据</text>
						</view>
						<view class="function-item" @click="clearStorage">
							<view class="function-icon test">🗑️</view>
							<text class="function-text">清除缓存</text>
						</view>
					</view>
				</view>
			</PermissionCheck>
		</view>
		
		<!-- 调试信息 -->
		<view class="debug-section" v-if="showDebug">
			<view class="debug-header">
				<text class="debug-title">调试信息</text>
				<text class="debug-close" @click="closeDebug">×</text>
			</view>
			<view class="debug-content">
				<text class="debug-text">角色: {{ roleConfig ? roleConfig.name : '无' }}</text>
				<text class="debug-text">用户: {{ userInfo.username || '未登录' }}</text>
				<text class="debug-text">权限: {{ userInfo.roles ? userInfo.roles.join(', ') : '无' }}</text>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goToWorkbench">
				<text class="nav-icon">⊞</text>
				<text class="nav-text">工作台</text>
			</view>
			<view class="nav-item" @click="goToAssetManagement">
				<text class="nav-icon">📦</text>
				<text class="nav-text">资产管理</text>
			</view>
			<view class="nav-item" @click="goToFaultReport">
				<text class="nav-icon">📋</text>
				<text class="nav-text">故障报修</text>
			</view>
			<view class="nav-item" @click="goToRepairs">
				<text class="nav-icon">🔧</text>
				<text class="nav-text">故障维修</text>
				<view class="nav-badge">3</view>
			</view>
			<view class="nav-item active">
				<text class="nav-icon">⋯</text>
				<text class="nav-text">更多</text>
			</view>
		</view>
	</view>
</template>

<script>
		import permissionManager from '@/utils/permission.js'
		import PermissionCheck from '@/components/PermissionCheck.vue'
		import navigation from '@/utils/navigation.js'
	
	export default {
		components: {
			PermissionCheck
		},
		data() {
			return {
				userInfo: {},
				roleConfig: null,
				showDebug: false
			}
		},
		onLoad() {
			this.checkLoginStatus();
		},
		onShow() {
			this.loadUserInfo();
			this.$nextTick(() => {
				this.loadRoleConfig();
			});
		},
		methods: {
			// 检查登录状态
			checkLoginStatus() {
				const { isLoggedIn } = require('@/utils/auth');
				if (!isLoggedIn()) {
					uni.reLaunch({
						url: '/pages/login/login-new'
					});
				}
			},
			
			// 加载用户信息
			loadUserInfo() {
				const { getUserInfo } = require('@/utils/auth');
				const userInfo = getUserInfo();
				if (userInfo) {
					this.userInfo = userInfo;
					permissionManager.setUserInfo(userInfo);
				}
			},
			
			// 加载角色配置
			loadRoleConfig() {
				this.roleConfig = permissionManager.getRoleConfig();
			},
			
			// 获取头部样式
			getHeaderStyle() {
				if (!this.roleConfig) return {};
				const themeStyles = permissionManager.getThemeStyles();
				return {
					'background': `linear-gradient(135deg, ${themeStyles['--primary-color']}, ${themeStyles['--secondary-color']})`
				};
			},
			
			// 获取底部导航栏样式
			getBottomNavStyle() {
				if (!this.roleConfig) return {};
				return {
					'border-top-color': this.roleConfig.primaryColor
				};
			},
			
			// 获取底部导航栏项目
			getBottomNavItems() {
				if (!this.roleConfig) return [];
				
				const roleKey = this.roleConfig.theme;
				
				const navConfigs = {
					admin: [
						{ key: 'dashboard', name: '工作台', icon: '⊞', path: '/pages/index/index' },
						{ key: 'assets', name: '资产管理', icon: '📦', path: '/pages/asset/index' },
						{ key: 'fault-report', name: '故障报修', icon: '📋', path: '/pages/repair/fault-report' },
						{ key: 'repairs', name: '故障维修', icon: '🔧', path: '/pages/repair/index' },
						{ key: 'more', name: '更多', icon: '⋯', path: '/pages/more/index' }
					],
					manager: [
						{ key: 'dashboard', name: '工作台', icon: '⊞', path: '/pages/index/index' },
						{ key: 'assets', name: '资产管理', icon: '📦', path: '/pages/asset/index' },
						{ key: 'fault-report', name: '故障报修', icon: '📋', path: '/pages/repair/fault-report' },
						{ key: 'repairs', name: '故障维修', icon: '🔧', path: '/pages/repair/index' },
						{ key: 'more', name: '更多', icon: '⋯', path: '/pages/more/index' }
					],
					worker: [
						{ key: 'dashboard', name: '工作台', icon: '⊞', path: '/pages/index/index' },
						{ key: 'fault-report', name: '故障报修', icon: '📋', path: '/pages/repair/fault-report' },
						{ key: 'repairs', name: '我的维修', icon: '🔧', path: '/pages/repair/index' },
						{ key: 'more', name: '更多', icon: '⋯', path: '/pages/more/index' }
					],
					foreman: [
						{ key: 'dashboard', name: '工作台', icon: '⊞', path: '/pages/index/index' },
						{ key: 'fault-report', name: '故障报修', icon: '📋', path: '/pages/repair/fault-report' },
						{ key: 'more', name: '更多', icon: '⋯', path: '/pages/more/index' }
					],
					warehouse: [
						{ key: 'dashboard', name: '工作台', icon: '⊞', path: '/pages/index/index' },
						{ key: 'assets', name: '资产管理', icon: '📦', path: '/pages/asset/index' },
						{ key: 'spare-parts', name: '备件管理', icon: '🧰', path: '/pages/spare-parts/index' },
						{ key: 'more', name: '更多', icon: '⋯', path: '/pages/more/index' }
					],
					normal: [
						{ key: 'dashboard', name: '工作台', icon: '⊞', path: '/pages/index/index' },
						{ key: 'fault-report', name: '故障报修', icon: '📋', path: '/pages/repair/fault-report' },
						{ key: 'more', name: '更多', icon: '⋯', path: '/pages/more/index' }
					],
					common: [
						{ key: 'dashboard', name: '工作台', icon: '⊞', path: '/pages/index/index' },
						{ key: 'more', name: '更多', icon: '⋯', path: '/pages/more/index' }
					]
				};
				
				return navConfigs[roleKey] || navConfigs.common;
			},
			
			// 获取徽章数量
			getBadgeCount(key) {
				const badgeMap = {
					'repairs': 99,
					'assets': 5
				};
				return badgeMap[key] || 0;
			},
			
			// 导航到页面
			navigateToPage(path) {
				if (path) {
					uni.navigateTo({
						url: path
					});
				}
			},
			
			// 系统管理功能
			goToUserManagement() {
				uni.showToast({
					title: '用户管理功能开发中',
					icon: 'none'
				});
			},
			
			goToRoleManagement() {
				uni.showToast({
					title: '角色管理功能开发中',
					icon: 'none'
				});
			},
			
			goToSystemSettings() {
				uni.showToast({
					title: '系统设置功能开发中',
					icon: 'none'
				});
			},
			
			// 维修管理功能
			goToRepairManagement() {
				uni.navigateTo({
					url: '/pages/repair/index'
				});
			},
			
			goToWorkOrderManagement() {
				uni.showToast({
					title: '工单管理功能开发中',
					icon: 'none'
				});
			},
			
			goToReports() {
				uni.showToast({
					title: '统计报表功能开发中',
					icon: 'none'
				});
			},
			
			// 仓库管理功能
			goToInventoryManagement() {
				uni.navigateTo({
					url: '/pages/spare-parts/index'
				});
			},
			
			goToWarehouseSettings() {
				uni.showToast({
					title: '仓库设置功能开发中',
					icon: 'none'
				});
			},
			
			// 个人功能
			goToProfile() {
				uni.navigateTo({
					url: '/pages/user/profile'
				});
			},
			
			goToChangePassword() {
				uni.navigateTo({
					url: '/pages/user/change-password'
				});
			},
			
			goToMyTasks() {
				uni.showToast({
					title: '我的任务功能开发中',
					icon: 'none'
				});
			},
			
			// 开发测试功能
			goToSimpleTest() {
				uni.navigateTo({
					url: '/pages/test/simple-test'
				});
			},
			
			goToCompleteTest() {
				uni.navigateTo({
					url: '/pages/test/complete-test'
				});
			},
			
			goToPermissionTest() {
				uni.navigateTo({
					url: '/pages/debug/permission-test'
				});
			},
			
			toggleDebug() {
				this.showDebug = !this.showDebug;
			},
			
			closeDebug() {
				this.showDebug = false;
			},
			
			refreshData() {
				this.loadUserInfo();
				this.$nextTick(() => {
					this.loadRoleConfig();
					uni.showToast({
						title: '数据已刷新',
						icon: 'success'
					});
				});
			},
			
			clearStorage() {
				uni.showModal({
					title: '确认清除',
					content: '确定要清除所有缓存数据吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							uni.showToast({
								title: '缓存已清除',
								icon: 'success'
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login-new'
								});
							}, 1500);
						}
					}
				});
			},
			
			goToSettings() {
				uni.showToast({
					title: '设置功能开发中',
					icon: 'none'
				});
			},
			
			// 底部导航栏点击事件 - 使用智能导航
			goToWorkbench() {
				navigation.goToWorkbench();
			},
			
			goToAssetManagement() {
				navigation.goToAssetManagement();
			},
			
			goToFaultReport() {
				navigation.goToFaultReport();
			},
			
			goToRepairs() {
				navigation.goToRepairs();
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f8f8f8;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		background-color: transparent;
	}
	
	.header {
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.user-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
	}
	
	.user-details {
		flex: 1;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.role-info {
		display: flex;
		align-items: center;
	}
	
	.role-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
	}
	
	.role-name {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.settings-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	
	.settings-icon .icon {
		font-size: 32rpx;
	}
	
	.banner {
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.banner-bg {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 60rpx 40rpx;
		text-align: right;
	}
	
	.banner-text {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 10rpx;
	}
	
	.banner-subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
	}
	
	.main-functions {
		flex: 1;
		padding: 0 30rpx;
	}
	
	.function-section {
		margin-bottom: 40rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
		border-left: 4rpx solid var(--primary-color, #409EFF);
	}
	
	.function-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}
	
	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 20rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}
	
	.function-item:active {
		transform: translateY(2rpx);
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
	}
	
	.function-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: white;
		margin-bottom: 15rpx;
	}
	
	.function-icon.admin { background-color: #409EFF; }
	.function-icon.manager { background-color: #67C23A; }
	.function-icon.warehouse { background-color: #E6A23C; }
	.function-icon.personal { background-color: #909399; }
	.function-icon.test { background-color: #F56C6C; }
	
	.function-text {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		font-weight: 500;
	}
	
	/* 调试相关样式 */
	.debug-section {
		background-color: #fff3cd;
		border: 1rpx solid #ffeaa7;
		border-radius: 16rpx;
		margin: 20rpx 30rpx;
		padding: 20rpx;
	}
	
	.debug-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.debug-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #856404;
	}
	
	.debug-close {
		font-size: 36rpx;
		color: #856404;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}
	
	.debug-content {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}
	
	.debug-text {
		font-size: 24rpx;
		color: #856404;
	}
	
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #e0e0e0;
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		z-index: 9999;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		height: 120rpx;
	}
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		position: relative;
		flex: 1;
		color: #999999;
		font-size: 24rpx;
		padding: 10rpx 0;
	}
	
	.nav-item.active {
		color: #007AFF;
	}
	
	.nav-item.active .nav-icon {
		color: #007AFF;
	}
	
	.nav-item.active .nav-text {
		color: #007AFF;
		font-weight: 500;
	}
	
	.nav-icon {
		font-size: 40rpx;
		margin-bottom: 5rpx;
		color: #666666;
	}
	
	.nav-text {
		font-size: 20rpx;
		color: #666666;
	}
	
	.nav-badge {
		position: absolute;
		top: 5rpx;
		right: 15rpx;
		width: 20rpx;
		height: 20rpx;
		background-color: #ff3b30;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12rpx;
		color: white;
		font-weight: bold;
		min-width: 20rpx;
		text-align: center;
		line-height: 1;
	}
</style>
